<template>
  <div class="systemAgent components-container">
    <!-- ========头部======-->
    <el-form :inline="true">
      <el-row>
        <el-col :span="20">
          <el-form-item label="经纪人名称">
            <el-input v-model="list.brokerName" placeholder="请输入岗位名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系人姓名">
            <el-input v-model="list.contactName" placeholder="请输入联系人姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="经手销售">
            <el-input v-model="list.saleUser" placeholder="请输入经手销售" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search()" size="medium" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="text-align:right;">
          <el-button type="primary" size="medium" icon="el-icon-plus" @click="openBox('add')" v-show="showAdd">新增</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="border:1px solid red;margin-bottom: 20px;"></div>
    <!--====================头部组建======ss=======================-->
    <fns-header @search="queryList">
      <span slot="slot1">
        <el-form-item label="联系人姓名">
          <el-input v-model="list.contactName" placeholder="请输入联系人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="经手销售">
          <el-input v-model="list.saleUser" placeholder="请输入经手销售" clearable></el-input>
        </el-form-item>
      </span>
    </fns-header>
    <div>
      <fns-dialog-lg :dialogLgData="dialogLgData" @submitForm="submitForm">
        <el-form class="main" id='formModel' ref="formModel" :model="formModel" :rules="rules" label-width="110px"  slot="body">
          <el-row>
            <el-col :span="11">
              <el-form-item label="密码：" prop="psd">
                <el-input v-model="formModel.psd" type="password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="11" :offset="1">
              <el-form-item label="确认密码：" prop="confirmPsd">
                <el-input v-model="formModel.confirmPsd" type="password" placeholder="请输入密码" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </fns-dialog-lg>
    </div>
    <!--<div>-->
    <!--<agent-dialog></agent-dialog>-->
    <!--</div>-->

    <!--====================头部组建===============end==============-->

    <!-- ========表格======-->
    <template>
      <el-table
        v-loading="loading"
        :data="tableData"
        class="fns-table"
        border
        style="width: 100%">
        <el-table-column
          prop="brokerName"
          align="center"
          label="经纪人名称">
        </el-table-column>
        <el-table-column
          prop="saleMode"
          label="销售方式"
          :formatter="formatterSaleMode"
          align="center">
        </el-table-column>
        <el-table-column
          prop="salesBrand"
          label="销售品牌"
          width="200"
          class-name="maxTableLength"
          align="center">
        </el-table-column>
        <el-table-column
          prop="placeArea"
          label="销售省份"
          align="center">
        </el-table-column>
        <el-table-column
          prop="contactName"
          label="联系人姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="contactPhone"
          label="联系电话"
          align="center">
        </el-table-column>
        <el-table-column
          prop="saleUserName"
          label="经手销售"
          align="center">
        </el-table-column>
        <el-table-column
          prop="dealNums"
          label="成交台数"
          align="center">
        </el-table-column>
        <el-table-column
          prop="updatedOn"
          label="修改时间"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="80">
          <template slot-scope="scope">
            <el-tooltip content="修改" placement="top" v-show="showUpdate">
              <a @click="openBox('update', scope.row, scope.$index)">
                <i class="el-icon-edit-outline"></i>
              </a>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- ========页码======-->
    <pages v-on:_pageChange="_pageChange" :total="total"></pages>

    <!-- ========弹窗======-->
    <el-dialog
      :title="modelTitle"
      :visible.sync="dialogVisible"
      width="40%"
      class="fns-el-dialog"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <!--<span style="font-size:16px;margin-bottom:10px;display:inline-block;">经纪人信息</span>-->

      <el-form class="main" id='formModel' ref="formModel" :model="formModel" :rules="rules" label-width="110px" style="margin-left:6px;">
        <el-row>
          <el-col :span="11" v-show="modelTitle === '新增'">
            <el-form-item label="账号：" prop="account">
              <el-input v-model="formModel.account" placeholder="请输入账号"  :maxlength='length.max11'   clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11" v-if="modelTitle !== '新增'">
            <el-form-item label="账号：">
              <el-input v-model="formModel.account" placeholder="请输入账号" disabled ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="1">
            <el-form-item label="经纪人名称：" prop="brokerName">
              <el-input v-model="formModel.brokerName" :maxlength='length.max20' placeholder="请输入经纪人名称" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="密码：" prop="psd">
              <el-input v-model="formModel.psd" type="password" placeholder="请输入密码" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="1">
            <el-form-item label="确认密码：" prop="confirmPsd">
              <el-input v-model="formModel.confirmPsd" type="password" placeholder="请输入密码" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="11">
            <el-form-item label="所在省份：" prop="placeArea">
              <el-select v-model="formModel.placeArea" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in cityOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="1">
            <el-form-item label="企业性质：" prop="enterpriseType">
              <el-select v-model="formModel.enterpriseType" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in companyTypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="公司地址：" prop="companyAddress">
              <el-input v-model="formModel.companyAddress" placeholder="请输入公司地址" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="销售品牌：" prop="salesBrand">
              <el-select v-model="formModel.salesBrand" multiple filterable placeholder="请选择" clearable style="width: 100%;">
                <el-option
                  v-for="(item, index) in brandOptions"
                  :key="index"
                  :label="item.keyName"
                  :value="item.valueName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="11">
            <el-form-item label="经手销售：" prop="saleUserId">
              <el-select v-model="formModel.saleUserId"  filterable placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in saleUserOption"
                  :key="index"
                  :label="item.keyName"
                  :value="item.valueName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="1">
            <el-form-item label="销售方式：" prop="saleMode">
              <el-checkbox-group v-model="formModel.saleMode" @change="checkboxChange()">
                <el-checkbox label="0">零售</el-checkbox>
                <el-checkbox label="1" style=' margin-left: 15px;'>批售</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="23" class="modalCheckBox">
            <el-form-item label="销售省份："  class="saleArea">
              <div v-for="(item, index) in areaOptions" :key="index">
                <div v-if="index === 0">
                  <el-checkbox  v-model="checkAll1" @change="handleCheckAllChange1">{{
                    item.title }}
                  </el-checkbox>
                  <el-checkbox-group v-model="salesArea1" @change="handleCheckedCitiesChange1">
                    <el-checkbox v-for="line1 in item.city" :label="line1" :key="line1">{{ line1 }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div v-if="index === 1">
                  <el-checkbox  v-model="checkAll2" @change="handleCheckAllChange2">{{
                    item.title }}
                  </el-checkbox>
                  <el-checkbox-group v-model="salesArea2" @change="handleCheckedCitiesChange2">
                    <el-checkbox v-for="line2 in item.city" :label="line2" :key="line2">{{ line2 }}</el-checkbox>
                  </el-checkbox-group>
                </div>

                <div v-if="index === 2">
                  <el-checkbox  v-model="checkAll3" @change="handleCheckAllChange3">{{
                    item.title }}
                  </el-checkbox>
                  <el-checkbox-group v-model="salesArea3" @change="handleCheckedCitiesChange3">
                    <el-checkbox v-for="line3 in item.city" :label="line3" :key="line3">{{ line3 }}</el-checkbox>
                  </el-checkbox-group>
                </div>

                <div v-if="index === 3">
                  <el-checkbox  v-model="checkAll4" @change="handleCheckAllChange4">{{
                    item.title }}
                  </el-checkbox>
                  <el-checkbox-group v-model="salesArea4" @change="handleCheckedCitiesChange4">
                    <el-checkbox v-for="line4 in item.city" :label="line4" :key="line4">{{ line4 }}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>

              <div class="fns-error-msg" style="line-height: 18px; font-size: 12px;" v-if="showAreaMsg">销售省份不能为空</div>

            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="联系人姓名：" prop="contactName">
              <el-input v-model="formModel.contactName" :maxlength='length.max10' placeholder="请输入联系人姓名" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="1">
            <el-form-item label="联系电话：" prop="contactPhone">
              <el-input v-model="formModel.contactPhone" placeholder="请输入联系电话" :maxlength='length.max11' clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="邮寄地址：" prop="mailAddress">
              <el-input v-model="formModel.mailAddress" :maxlength='length.max100' placeholder="请输入邮寄地址" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="23">
            <el-form-item label="备注：">
              <el-input :maxlength='areaMaxlength' type="textarea"  v-model="formModel.remarks" placeholder="请填写备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm1">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { Message } from 'element-ui'
  import * as api from '@/api/system'
  import pages from '../../components/page/page'
  import fnsHeader from '@/components/header'
  import fnsDialogLg from '@/components/dialogLg'
  import agentDialog from './component/agentDialog'
  import { findMenu, findSubMenu, findBtn } from '@/utils/btn'
  import { mapState } from 'vuex'
  import { mapActions } from 'vuex'

  export default {
    data() {
      return {
        dialogLg: false,
        dialogLgData: {
          title: 'dialog',
          dialogVisible: false
        },
        fnsDate1: '',
        fnsDate2: '',
        oldNum: '',
        showAreaMsg: false,
        areaMaxlength: 300,
        length: {
          max10: 10,
          max11: 11,
          max14: 14,
          max18: 18,
          max20: 20,
          max50: 50,
          max60: 60,
          max100: 100
        },
        isIndeterminate1: false,
        isIndeterminate2: false,
        isIndeterminate3: false,
        isIndeterminate4: false,
        disabled: false,
        loading: false,
        total: 0,
        modelTitle: '',
        dialogVisible: false,
        confirmPsd: '',
        addAndUpdate: 'add',
        saleUserOption: [],
        formArr: [],
        page: {
          index: 1,
          size: 10
        },
        cityArr1: [],
        cityArr2: [],
        cityArr3: [],
        cityArr4: [],
        checkAll1: false,
        checkAll2: false,
        checkAll3: false,
        checkAll4: false,
        salesArea1: [],
        salesArea2: [],
        salesArea3: [],
        salesArea4: [],
        formHeader: {
          user: '',
          region: ''
        },
        list: {
          brokerName: '',
          contactName: '',
          saleUser: ''
        },
        formModel: {
          id: '',
          salesBrand: [],
          saleArea: [],
          account: '',
          psd: '',
          confirmPsd: '',
          placeArea: [],
          enterpriseType: [],
          brokerName: '',
          saleMode: [],
          companyAddress: '',
          contactName: '',
          contactPhone: '',
          mailAddress: '',
          saleUserId: '',
          remarks: ''
        },
        tableData: [],
        rules: {
          account: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            { pattern: /^1[34578]\d{9}$/, message: '请输入正确的11位手机号码', trigger: 'blur' }
          ],
          brokerName: [
            { required: true, message: '经纪人名称不能为空', trigger: 'blur' }
          ],
          psd: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度为6到20位' }
          ],
          confirmPsd: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度为6到20位' }
          ],
          placeArea: [
            { required: true, message: '所在省份不能为空', trigger: 'change' }
          ],
          enterpriseType: [
            { required: true, message: '企业性质不能为空', trigger: 'change' }
          ],
          companyAddress: [
            { required: true, message: '公司地址不能为空', trigger: 'blur' }
          ],
          salesBrand: [
            { required: true, message: '销售品牌不能为空', trigger: 'change' }
          ],
          saleMode: [
            { required: true, message: '销售方式不能为空', trigger: 'change' }
          ],
          saleArea: [
            { required: true, message: '销售省份不能为空', trigger: 'blur' }
            // { pattern: /^\d$/, message: '格式不正确!' }
          ],
          contactName: [
            { required: true, message: '联系人不能为空', trigger: 'blur' }
          ],
          contactPhone: [
            { required: true, message: '联系电话不能为空', trigger: 'blur' },
            { pattern: /^[0-9]{6,12}$/, message: '联系电话不正确!', trigger: 'blur' }
          ],
          saleUserId: [
            { required: true, message: '经手销售不能为空', trigger: 'blur' }
          ],
          mailAddress: [
            { required: true, message: '邮寄地址不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      dialogVisible() {
        if (this.$refs.formModel) {
          this.$refs['formModel'].clearValidate()
          this.$refs['formModel'].resetFields()
        }
      }
    },
    components: {
      pages,
      fnsHeader,
      agentDialog,
      fnsDialogLg
    },
    created() {
      this.getSaleUsers()
      this.queryList()
    },
    computed: {
      ...mapState({
        cityOptions: state => state.selecteData.city,
        areaOptions: state => state.selecteData.area,
        brandOptions: state => state.selecteData.brandOptions,
        companyTypeOptions: state => state.selecteData.companyType
      }),
      showAdd() {
        let menu = findMenu('系统管理')
        let subMenu = findSubMenu(menu.children, '经纪人管理')
        if (findBtn(subMenu.children, '新增')) {
          return true
        } else {
          return false
        }
      },
      showUpdate() {
        let menu = findMenu('系统管理')
        let subMenu = findSubMenu(menu.children, '经纪人管理')
        if (findBtn(subMenu.children, '修改')) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      ...mapActions({
        $brandOptions: 'brandOptions'
      }),
      // 清除arr值
      clearArrVal(arr) {
        for (var Item in arr) {
          arr[Item] = ''
        }
      },
      // 获取集合
      getIntersection(val, back) {
        var a = new Set(val)
        var b = new Set(back)
        const intersectionSet = new Set([...a].filter(x => b.has(x)))
        var result = Array.from(intersectionSet)
        return result
      },
      _pageChange(val, flag) {
        var arr = []
        if (flag === 'size') {
          this.page.index = val
          this.queryList()
        } else {
          arr.push(val)
          this.page.index = 1
          this.page.size = arr[0]
          this.queryList()
        }
      },
      search() {
        this.dialogLgData.dialogVisible = true
        this.page.index = 1
        this.queryList()
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      submitForm() {
        this.$refs['formModel'].validate((valid) => {
          if (valid) {
            this.dialogLgData.dialogVisible = false
          }
        })
      },
      queryList(params) {
        console.log('fnsDate1:', this.fnsDate1)
        console.log('fnsDate2:', this.fnsDate2)
        this.loading = true
        var pages = {
          index: this.page.index,
          size: this.page.size
        }
        var data = Object.assign({}, this.list, pages)
        api.brokerList(data).then((res) => {
          if (+res.code === 0) {
            this.tableData = res.data.rows
            this.total = +res.data.total
          }
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      // 打开修改 and 增加 弹窗
      openBox(val, row) {
        setTimeout(function() {
          document.getElementById('formModel').scrollTop = 0
        }, 200)
        this.$brandOptions()
        this.getCity()
        if (val === 'add') {
          for (var Item in this.formModel) {
            this.formModel[Item] = ''
            // if (Item === 'saleMode' || Item === 'salesBrand' || Item === 'saleArea') {
            //   this.formModel[Item] = []
            // }
          }
          this.disabled = false
          this.formModel.salesBrand = []
          this.formModel.saleArea = []
          this.formModel.saleMode = ['0', '1']
          this.salesArea1 = []
          this.salesArea2 = []
          this.salesArea3 = []
          this.salesArea4 = []
          this.checkAll1 = false
          this.checkAll2 = false
          this.checkAll3 = false
          this.checkAll4 = false
          this.dialogVisible = true
          this.addAndUpdate = 'add'
          this.modelTitle = '新增'
        } else if (val === 'update') {
          this.disabled = true
          this.dialogVisible = true
          this.addAndUpdate = 'update'
          this.modelTitle = '修改'
          this.getMsg(row)
        }
      },
      // 获取经纪人信息
      getMsg(row) {
        const id = { id: row.id }
        api.idList(id).then((res) => {
          if (+res.code === 0) {
            if (this.$refs['formModel'] !== undefined) {
              this.$refs['formModel'].resetFields()
            }
            var rowData = res.data
            var area = rowData.saleArea.split(',') || ''
            this.formModel.salesBrand = rowData.salesBrand ? rowData.salesBrand.split(',') : []
            this.formModel.id = rowData.id || ''
            this.formModel.account = rowData.account === null ? '无' : rowData.account
            this.formModel.confirmPsd = this.formModel.psd = rowData.psd || '******'
            this.formModel.placeArea = rowData.placeArea
            this.formModel.brokerName = rowData.brokerName || ''
            this.formModel.companyAddress = rowData.companyAddress || ''
            this.formModel.saleArea = area
            this.formModel.contactName = rowData.contactName || ''
            this.formModel.mailAddress = rowData.mailAddress || ''
            this.formModel.contactPhone = rowData.contactPhone || ''
            this.formModel.saleUserId = rowData.saleUserName
            this.formModel.remarks = rowData.remarks
            this.changeType(rowData.enterpriseType)
            this.formModel.saleMode = rowData.saleMode ? rowData.saleMode.split(',') : ''
            this.salesArea1 = this.getIntersection(this.areaOptions[0].city, area)
            this.salesArea2 = this.getIntersection(this.areaOptions[1].city, area)
            this.salesArea3 = this.getIntersection(this.areaOptions[2].city, area)
            this.salesArea4 = this.getIntersection(this.areaOptions[3].city, area)
            this.isValue()
            // 销售区域
            this.checkAll1 = true
            this.checkAll2 = true
            this.checkAll3 = true
            this.checkAll4 = true
            var _this = this
            var city1 = this.areaOptions[0].city
            var city2 = this.areaOptions[1].city
            var city3 = this.areaOptions[2].city
            var city4 = this.areaOptions[3].city
            city1.forEach(function(item, index) {
              if (area.indexOf(item) === -1) {
                _this.checkAll1 = false
              }
            })
            city2.forEach(function(item, index) {
              if (area.indexOf(item) === -1) {
                _this.checkAll2 = false
              }
            })
            city3.forEach(function(item, index) {
              if (area.indexOf(item) === -1) {
                _this.checkAll3 = false
              }
            })
            city4.forEach(function(item, index) {
              if (area.indexOf(item) === -1) {
                _this.checkAll4 = false
              }
            })
          }
        })
      },
      add() {
        this.$refs['formModel'].validate((valid) => {
          if (valid) {
            delete this.formModel.confirmPsd
            // 销售方式
            var obj = {
              saleMode: this.formModel.saleMode.join(','),
              saleArea: this.formModel.saleArea.join(',')
            }
            var data = Object.assign({}, this.formModel, obj)
            api.brokerAdd(data).then((res) => {
              this.formModel.confirmPsd = this.formModel.psd
              if (+res.code === 0) {
                this.queryList()
                this.dialogVisible = false
              }
            }).catch(err => {
              // console.log(err)
              this.formModel.confirmPsd = this.formModel.psd
            })
          } else {
            Message({
              message: '有必填项，格式不正确',
              type: 'warning',
              duration: 2000
            })
            return
          }
        })
      },
      update() {
        this.$refs['formModel'].validate((valid) => {
          if (valid) {
            delete this.formModel.confirmPsd
            // 销售方式
            var obj = {
              salesBrand: this.changeMoreSelect(this.formModel.salesBrand),
              saleUserId: this.changeSaleUserId(this.formModel.saleUserId),
              saleMode: this.formModel.saleMode.join(','),
              saleArea: this.formModel.saleArea.join(','),
              enterpriseType: this.changeTypeCode(this.formModel.enterpriseType)
            }
            var data = Object.assign({}, this.formModel, obj)
            api.brokerUpdate(data).then((res) => {
              this.formModel.confirmPsd = this.formModel.psd
              if (+res.code === 0) {
                this.dialogVisible = false
                this.queryList()
              }
            }).catch(err => {
              this.formModel.confirmPsd = this.formModel.psd
            })
          } else {
            Message({
              message: '有必填项，格式不正确',
              type: 'warning',
              duration: 2000
            })
            return
          }
        })
      },
      // 修改 and 增加
      submitForm1() {
        if (this.formModel.confirmPsd !== this.formModel.psd) {
          Message({
            message: '密码不一致',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
        this.getSalesArea()
        if (this.addAndUpdate === 'add') {
          this.add()
        } else {
          this.update()
        }
      },
      getCity() {
        this.cityArr1 = this.areaOptions[0].city
        this.cityArr2 = this.areaOptions[1].city
        this.cityArr3 = this.areaOptions[2].city
        this.cityArr4 = this.areaOptions[3].city
      },
      // 获取经手人信息下拉框
      getSaleUsers() {
        api.getSaleUsers().then((res) => {
          if (+res.code === 0) {
            this.saleUserOption = res.data
          }
        })
      },
      // ======多选=====
      getSalesArea() {
        this.formModel.saleArea = []
        this.formModel.saleArea = [...this.salesArea1, ...this.salesArea2, ...this.salesArea3, ...this.salesArea4]
        if (this.formModel.saleArea.length === 0) {
          this.showAreaMsg = true
          return
        } else {
          this.showAreaMsg = false
        }
      },
      handleCheckAllChange1(val) {
        this.salesArea1 = val ? this.cityArr1 : []
        this.getSalesArea()
        this.isIndeterminate1 = false
      },
      handleCheckAllChange2(val) {
        this.salesArea2 = val ? this.cityArr2 : []
        this.getSalesArea()
        this.isIndeterminate2 = false
      },
      handleCheckAllChange3(val) {
        this.salesArea3 = val ? this.cityArr3 : []
        this.getSalesArea()
        this.isIndeterminate3 = false
      },
      handleCheckAllChange4(val) {
        this.salesArea4 = val ? this.cityArr4 : []
        this.getSalesArea()
        this.isIndeterminate4 = false
      },
      handleCheckedCitiesChange1(value) {
        const checkedCount = value.length
        this.checkAll1 = checkedCount === this.cityArr1.length
        this.isIndeterminate1 = checkedCount > 0 && checkedCount < this.cityArr1.length
        this.salesArea1 = value
        this.getSalesArea()
      },
      handleCheckedCitiesChange2(value) {
        const checkedCount = value.length
        this.checkAll2 = checkedCount === this.cityArr2.length
        this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.cityArr2.length
        this.salesArea2 = value
        this.getSalesArea()
      },
      handleCheckedCitiesChange3(value) {
        const checkedCount = value.length
        this.checkAll3 = checkedCount === this.cityArr3.length
        this.isIndeterminate3 = checkedCount > 0 && checkedCount < this.cityArr3.length
        this.getSalesArea()
      },
      handleCheckedCitiesChange4(value) {
        const checkedCount = value.length
        this.checkAll4 = checkedCount === this.cityArr4.length
        this.isIndeterminate4 = checkedCount > 0 && checkedCount < this.cityArr4.length
        this.getSalesArea()
      },
      changeType(val) {
        if (+val === 1) {
          this.formModel.enterpriseType = '私营企业'
        } else if (+val === 2) {
          this.formModel.enterpriseType = '合资企业'
        } else if (+val === 3) {
          this.formModel.enterpriseType = '国有企业'
        } else if (+val === 4) {
          this.formModel.enterpriseType = '国有控股企业'
        } else if (+val === 5) {
          this.formModel.enterpriseType = '外资企业'
        } else {
          this.formModel.enterpriseType = ''
        }
      },
      changeTypeCode(val) {
        if (val === '私营企业') {
          return '1'
        } else if (val === '合资企业') {
          return '2'
        } else if (val === '国有企业') {
          return '3'
        } else if (val === '国有控股企业') {
          return '4'
        } else if (val === '外资企业') {
          return '5'
        } else {
          return ''
        }
      },
      // 下拉框单选 传code 转换
      changeSaleUserId(val) {
        var num = val - 0
        if (num) {
          return val
        } else {
          var str = ''
          this.saleUserOption.forEach(function(item, index) {
            if (item.keyName === val) {
              str = item.valueName
            }
          })
          return str
        }
      },
      isValue() {
        var that = this
        var arr = this.saleUserOption.filter(item => {
          return item.keyName === that.formModel.saleUserId
        })
        if (arr.length === 0) {
          that.formModel.saleUserId = ''
        }
      },
      checkboxChange(val) {
        // console.log(this.formModel.saleMode)
      },
      // 下拉框多选 传code 转换
      changeMoreSelect(val) {
        var that = this
        if (val.length > 0) {
          val.forEach(function(item, index) {
            if (item - 0) {
              return
            } else {
              that.brandOptions.forEach(function(item1, index1) {
                // console.log(item1.keyName)
                if (item === item1.keyName) {
                  val[index] = item1.valueName
                }
              })
            }
          })
          return val
        }
      },
      formatterSaleMode(row) {
        var arr = row.saleMode.split(',') || ''
        var el = ''
        if (arr.length === 1) {
          if (+arr[0] === 0) {
            el += '零售'
          } else if (+arr[0] === 1) {
            el += '批售'
          }
        } else if (arr.length === 2) {
          el = '零售，批售'
        }
        return el
      }
    }
  }
</script>
<style lang="scss">
  .systemAgent {
    position: relative;
    padding: 20px;
    .saleArea .el-form-item__label:before {
      content: '* ';
      color: red;
    }
    /*.el-dialog {*/
    /*min-width: 800px;*/
    /*el-form-item__content {*/
    /*margin-left: 110px;*/
    /*}*/
    /*.main {*/
    /*max-height: 580px;*/
    /*overflow-y: auto;*/
    /*}*/
    /*}*/
    /*.el-table {*/ // 固定分液器
    /*.el-table__body-wrapper {*/
    /*height: 630px;*/
    /*overflow-x: inherit;*/
    /*}*/
    /*}*/
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>
